<template>
  <view class="coupon-box" :style="{backgroundImage:'url('+currentBg+')'}" :class="{'coupon-box-lack': !coupon.isAct}">
    <view class="left">
      <view class="column-1">
        <view class="row-1">
          <template v-if="isDiscount">
            <template v-if="coupon.type === 4">
              <view class="num">{{coupon.immediately}}</view>
              <view class="text">元</view>
            </template>
            <template v-else-if="coupon.num<10">
              <view class="num">{{coupon.num}}</view>
              <view class="text">折</view>
            </template>
            <view v-else class="text">免单</view>
          </template>
        </view>
        <view class="row-2">
          {{coupon.typeText}}
        </view>
      </view>
      <view class="column-2">
        <view class="row-1">{{coupon.tit}}</view>
        <view class="row-2">有效期至 {{coupon.endDate}}</view>
      </view>
    </view>
    <view class="right" @click="clickHandle">
      {{coupon.rightText}}
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      coupon: {
        type: Object,
        default: () => {
          return {
            endDate: '2023.10.31 23:59',
            tit: '立享全场折扣',
            rightText: '使用',
            typeText: '折扣券',
            type: 0,
            num: 5,
            isAct:true,
          }
        }
      }
    },
    computed: {
      currentBg() {
        const {isAct,type} = this.coupon
        let varName = isAct ? 'couponBoxBg' : 'couponBoxBgLack'
  
        return this.staticImgs[varName + type]
      },
      isDiscount() {
        return this.coupon.type === 1 || this.coupon.type === 4
      }
    },
    data() {
      return {
        staticImgs: {
          couponBoxBg1: this.imgBaseURL + '/coupon/coupon_box_bg_1.png',
          couponBoxBg2: this.imgBaseURL + '/coupon/coupon_box_bg_2.png',
          couponBoxBg3: this.imgBaseURL + '/coupon/coupon_box_bg_3.png',
          couponBoxBg4: this.imgBaseURL + '/coupon/coupon_box_bg_1.png',
          couponBoxBgLack1: this.imgBaseURL + '/coupon/coupon_box_bg_1_lack.png',
          couponBoxBgLack2: this.imgBaseURL + '/coupon/coupon_box_bg_2_lack.png',
          couponBoxBgLack3: this.imgBaseURL + '/coupon/coupon_box_bg_3_lack.png',
          couponBoxBgLack4: this.imgBaseURL + '/coupon/coupon_box_bg_1_lack.png',
        }
      }
    },
    methods:{
      clickHandle(){
        this.$emit('clickHandle')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .coupon-box {
    width: 678rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    box-sizing: border-box;

    background-repeat: no-repeat;
    background-size: cover;


    .left {
      display: flex;

      .column-1 {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        // padding-bottom: 16rpx;

        .row-1 {
          display: flex;
          align-items: flex-end;
          padding-top: 14rpx;

          .num {
            font-size: 60rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FF5FAA;

            display: flex;
            align-items: flex-end;
            line-height: 46rpx;
          }

          .text {
            font-size: 26rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FF5FAA;
          }
        }

        .row-2 {
          margin-top: 16rpx;
          width: 120rpx;
          height: 48rpx;
          border-radius: 24rpx;
          border: 2rpx solid #FF5FAA;

          text-align: center;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FF5FAA;
          line-height: 48rpx;
        }
      }

      .column-2 {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        margin-left: 20rpx;

        .row-1 {
              max-width: 300rpx;

          font-size: 30rpx;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #333333;
        }

        .row-2 {
          margin-top: 12rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A0A0A0;
        }
      }
    }

    .right {
      width: 140rpx;
      height: 57rpx;
      background: linear-gradient(270deg, #FF5FD8 0%, #FF5D5D 100%, #FF5D5D 100%);
      border-radius: 29rpx;

      text-align: center;
      line-height: 56rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }

  }

  //.coupon-box ==== end


  .coupon-box-lack {
    .right {
      background: linear-gradient(90deg, #E5E5E5 0%, #D5D3D2 100%);
    }

    .left {
      .column-1 {
        .row-1 {
          .num {
            color: #999999;
          }
          .text {
            color: #999999;
          }
        }

        .row-2 {
          border: 2rpx solid #999999;
          color: #999999;
        }
      }

      .column-2 {
        .row-1 {
          color: #999999;
        }

        .row-2 {
          color: #C6C5C5;
        }
      }
    }
  }
</style>